<template>
  <view class="more-services-page">
    <!-- 搜索栏 -->
    <view class="search-section">
      <u-search 
        v-model="searchKeyword" 
        placeholder="搜索服务项目"
        :show-action="false"
        bg-color="#f5f5f5"
        @search="handleSearch"
        @clear="handleClear"
      ></u-search>
    </view>

    <!-- 服务分类 -->
    <view class="category-section">
      <view class="category-title">
        <text class="title-text">服务分类</text>
      </view>
      <view class="category-grid">
        <view 
          v-for="(category, index) in serviceCategories" 
          :key="index"
          class="category-item"
          @click="handleCategoryClick(category)"
        >
          <view class="category-icon">
            <u-icon :name="category.icon" size="24" :color="category.color"></u-icon>
          </view>
          <text class="category-text">{{ category.label }}</text>
        </view>
      </view>
    </view>

    <!-- 热门服务 -->
    <view class="hot-services-section">
      <view class="section-title">
        <text class="title-text">热门服务</text>
        <text class="more-text" @click="handleViewMore">更多</text>
      </view>
      <view class="hot-services-list">
        <view 
          v-for="(service, index) in hotServices" 
          :key="index"
          class="hot-service-item"
          @click="handleServiceClick(service)"
        >
          <view class="service-image">
            <image :src="service.image" mode="aspectFill" class="image"></image>
          </view>
          <view class="service-content">
            <text class="service-title">{{ service.title }}</text>
            <text class="service-description">{{ service.description }}</text>
            <view class="service-meta">
              <text class="service-price" :class="{ free: service.price === 0 }">
                {{ service.price === 0 ? '免费' : `¥${service.price}` }}
              </text>
              <text class="service-rating">{{ service.rating }}分</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 推荐服务 -->
    <view class="recommend-services-section">
      <view class="section-title">
        <text class="title-text">推荐服务</text>
      </view>
      <view class="recommend-services-grid">
        <view 
          v-for="(service, index) in recommendServices" 
          :key="index"
          class="recommend-service-item"
          @click="handleServiceClick(service)"
        >
          <view class="service-icon">
            <u-icon :name="service.icon" size="20" :color="service.color"></u-icon>
          </view>
          <text class="service-title">{{ service.title }}</text>
          <text class="service-description">{{ service.description }}</text>
        </view>
      </view>
    </view>

    <!-- 最新服务 -->
    <view class="latest-services-section">
      <view class="section-title">
        <text class="title-text">最新服务</text>
      </view>
      <view class="latest-services-list">
        <view 
          v-for="(service, index) in latestServices" 
          :key="index"
          class="latest-service-item"
          @click="handleServiceClick(service)"
        >
          <view class="service-info">
            <text class="service-title">{{ service.title }}</text>
            <text class="service-description">{{ service.description }}</text>
            <view class="service-meta">
              <text class="service-provider">{{ service.provider }}</text>
              <text class="service-time">{{ service.publishTime }}</text>
            </view>
          </view>
          <view class="service-action">
            <text class="action-text">查看详情</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="hotServices.length === 0 && recommendServices.length === 0 && latestServices.length === 0" class="empty-state">
      <u-icon name="more" size="48" color="#ccc"></u-icon>
      <text class="empty-text">暂无服务信息</text>
    </view>

    <!-- 加载更多 -->
    <view v-if="hasMore" class="load-more">
      <u-loading-icon v-if="loading" mode="circle"></u-loading-icon>
      <text v-else class="load-text" @click="loadMore">点击加载更多</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// 搜索关键词
const searchKeyword = ref('')

// 服务分类
const serviceCategories = reactive([
  { label: '家政服务', value: 'housekeeping', icon: 'home', color: '#1890ff' },
  { label: '维修服务', value: 'repair', icon: 'tools', color: '#52c41a' },
  { label: '清洁服务', value: 'cleaning', icon: 'brush', color: '#fa8c16' },
  { label: '配送服务', value: 'delivery', icon: 'truck', color: '#722ed1' },
  { label: '咨询服务', value: 'consultation', icon: 'message', color: '#eb2f96' },
  { label: '教育培训', value: 'education', icon: 'book', color: '#13c2c2' },
  { label: '健康医疗', value: 'health', icon: 'heart', color: '#f5222d' },
  { label: '其他服务', value: 'other', icon: 'more', color: '#666' }
])

// 热门服务
const hotServices = ref([
  {
    id: 1,
    title: '家庭深度保洁',
    description: '专业保洁团队，提供家庭深度清洁服务，让您的家焕然一新',
    price: 120,
    rating: 4.8,
    image: 'https://example.com/images/cleaning-service.jpg',
    category: 'cleaning'
  },
  {
    id: 2,
    title: '家电维修服务',
    description: '专业维修师傅，提供空调、洗衣机、冰箱等家电维修服务',
    price: 80,
    rating: 4.6,
    image: 'https://example.com/images/repair-service.jpg',
    category: 'repair'
  },
  {
    id: 3,
    title: '老人陪护服务',
    description: '专业护理人员，提供老人日常陪护、生活照料等服务',
    price: 150,
    rating: 4.9,
    image: 'https://example.com/images/care-service.jpg',
    category: 'health'
  }
])

// 推荐服务
const recommendServices = reactive([
  { title: '快递代收', description: '快递代收代发', icon: 'package', color: '#1890ff' },
  { title: '宠物寄养', description: '专业宠物寄养', icon: 'heart', color: '#52c41a' },
  { title: '法律咨询', description: '专业法律咨询', icon: 'file-text', color: '#fa8c16' },
  { title: '财务咨询', description: '财务规划咨询', icon: 'wallet', color: '#722ed1' },
  { title: '心理咨询', description: '心理健康咨询', icon: 'user', color: '#eb2f96' },
  { title: '翻译服务', description: '多语言翻译', icon: 'translate', color: '#13c2c2' },
  { title: '摄影服务', description: '专业摄影服务', icon: 'camera', color: '#f5222d' },
  { title: '设计服务', description: '平面设计服务', icon: 'edit', color: '#666' }
])

// 最新服务
const latestServices = ref([
  {
    id: 4,
    title: '儿童英语培训',
    description: '专业英语老师，提供儿童英语培训服务，寓教于乐',
    provider: '英语教育中心',
    publishTime: '2小时前',
    category: 'education'
  },
  {
    id: 5,
    title: '家庭营养师',
    description: '专业营养师，提供家庭营养搭配和健康饮食指导',
    provider: '健康管理中心',
    publishTime: '1天前',
    category: 'health'
  },
  {
    id: 6,
    title: '搬家服务',
    description: '专业搬家团队，提供安全快捷的搬家服务',
    provider: '搬家服务公司',
    publishTime: '3天前',
    category: 'delivery'
  }
])

// 加载状态
const loading = ref(false)
const hasMore = ref(true)

// 搜索处理
const handleSearch = (value: string) => {
  console.log('搜索服务:', value)
  // 这里实现搜索逻辑
}

// 清空搜索
const handleClear = () => {
  searchKeyword.value = ''
  console.log('清空搜索')
}

// 分类点击
const handleCategoryClick = (category: any) => {
  console.log('点击分类:', category)
  // 跳转到分类页面
  uni.navigateTo({
    url: `/pages/more-services/category?category=${category.value}`
  })
}

// 服务点击
const handleServiceClick = (service: any) => {
  console.log('点击服务:', service)
  // 跳转到服务详情页面
  uni.navigateTo({
    url: `/pages/more-services/detail?id=${service.id}`
  })
}

// 查看更多
const handleViewMore = () => {
  console.log('查看更多')
  // 跳转到服务列表页面
  uni.navigateTo({
    url: '/pages/more-services/list'
  })
}

// 加载更多
const loadMore = () => {
  if (loading.value) return
  
  loading.value = true
  setTimeout(() => {
    // 模拟加载更多数据
    loading.value = false
    hasMore.value = false
  }, 1000)
}

// 页面加载
onMounted(() => {
  console.log('更多服务页面加载完成')
})
</script>

<style lang="scss" scoped>
.more-services-page {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 0 0 20rpx 0;
}

.page-header {
  background: linear-gradient(135deg, #666 0%, #999 100%);
  padding: 20rpx 30rpx 30rpx;
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .header-title {
      .title-text {
        display: block;
        font-size: 36rpx;
        font-weight: 600;
        color: #fff;
        margin-bottom: 8rpx;
      }
      
      .title-subtitle {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
      }
    }
    
    .header-icon {
      width: 80rpx;
      height: 80rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.search-section {
  padding: 24rpx 32rpx;
  background-color: #fff;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.category-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  
  .category-title {
    padding: 30rpx 30rpx 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .title-text {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 30rpx;
    gap: 30rpx;
    
    .category-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12rpx;
      padding: 20rpx;
      border-radius: 12rpx;
      background-color: #f8f9fa;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.95);
        background-color: #e6f7ff;
      }
      
      .category-icon {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .category-text {
        font-size: 24rpx;
        color: #333;
        text-align: center;
      }
    }
  }
}

.hot-services-section,
.recommend-services-section,
.latest-services-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  
  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 30rpx 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .title-text {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
    }
    
    .more-text {
      font-size: 26rpx;
      color: #666;
    }
  }
  
  .hot-services-list {
    padding: 30rpx;
    
    .hot-service-item {
      display: flex;
      gap: 20rpx;
      margin-bottom: 30rpx;
      padding: 20rpx;
      border-radius: 12rpx;
      background-color: #f8f9fa;
      transition: all 0.3s ease;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &:active {
        transform: scale(0.98);
        background-color: #e6f7ff;
      }
      
      .service-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12rpx;
        overflow: hidden;
        flex-shrink: 0;
        
        .image {
          width: 100%;
          height: 100%;
        }
      }
      
      .service-content {
        flex: 1;
        
        .service-title {
          display: block;
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .service-description {
          display: block;
          font-size: 24rpx;
          color: #666;
          line-height: 1.4;
          margin-bottom: 12rpx;
        }
        
        .service-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .service-price {
            font-size: 26rpx;
            font-weight: 600;
            color: #ff4d4f;
            
            &.free {
              color: #52c41a;
            }
          }
          
          .service-rating {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
  
  .recommend-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 30rpx;
    gap: 20rpx;
    
    .recommend-service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12rpx;
      padding: 20rpx;
      border-radius: 12rpx;
      background-color: #f8f9fa;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.95);
        background-color: #e6f7ff;
      }
      
      .service-icon {
        width: 50rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .service-title {
        font-size: 24rpx;
        color: #333;
        font-weight: 500;
        text-align: center;
      }
      
      .service-description {
        font-size: 20rpx;
        color: #999;
        text-align: center;
        line-height: 1.3;
      }
    }
  }
  
  .latest-services-list {
    padding: 30rpx;
    
    .latest-service-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      border-radius: 12rpx;
      background-color: #f8f9fa;
      margin-bottom: 20rpx;
      transition: all 0.3s ease;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &:active {
        transform: scale(0.98);
        background-color: #e6f7ff;
      }
      
      .service-info {
        flex: 1;
        
        .service-title {
          display: block;
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .service-description {
          display: block;
          font-size: 24rpx;
          color: #666;
          line-height: 1.4;
          margin-bottom: 12rpx;
        }
        
        .service-meta {
          display: flex;
          gap: 20rpx;
          
          .service-provider {
            font-size: 22rpx;
            color: #999;
          }
          
          .service-time {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
      
      .service-action {
        .action-text {
          font-size: 24rpx;
          color: #1890ff;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .empty-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999;
  }
}

.load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0;
  
  .load-text {
    font-size: 28rpx;
    color: #666;
  }
}
</style>
